<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简化版俄罗斯方块</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="tetris.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
    <div class="tutorial">
        <h2>新手教程及操作提示</h2>
        <p>这是一个简化版的俄罗斯方块游戏。游戏目标是通过移动和旋转下落的方块，填满整行来消除行并获得分数。</p>
        <h3>操作方法：</h3>
        <ul>
            <li>← 键（或点击左边按钮）：向左移动方块</li>
            <li>→ 键（或点击右边按钮）：向右移动方块</li>
            <li>↑ 键（或点击旋转按钮）：旋转方块</li>
            <li>↓ 键（或点击向下按钮）：加速方块下落</li>
            <li>空格键（或点击直接落下按钮）：让方块直接落下</li>
            <li>P 键（或点击暂停按钮）：暂停/继续游戏</li>
        </ul>
    </div>

    <div class="game-container">
        <div class="canvas-container">
            <canvas id="game-canvas" width="300" height="600"></canvas>
            <div id="overlay" class="overlay">
                <p id="overlay-text">点击开始游戏</p>
                <button id="overlay-button">开始</button>
            </div>
        </div>

        <div class="game-info">
            <div>分数: <span id="score">0</span></div>
            <div>等级: <span id="level">1</span></div>
        </div>

        <div class="controls">
            <button id="left-btn"><i class="fa-solid fa-arrow-left"></i></button>
            <button id="rotate-btn"><i class="fa-solid fa-rotate"></i></button>
            <button id="right-btn"><i class="fa-solid fa-arrow-right"></i></button>
            <button id="down-btn"><i class="fa-solid fa-arrow-down"></i></button>
            <button id="drop-btn">直接落下</button>
            <button id="pause-btn"><i class="fa-solid fa-pause"></i></button>
        </div>
    </div>

    <div class="preview-container">
        <h2>方块预览</h2>
        <div class="current-preview" id="current-preview"></div>
        <div class="next-preview" id="next-preview"></div>
    </div>

    <script src="game.js"></script>
</body>
</html>